<template>
    <div>
        <form action="/">
            <van-search
                v-model="value"
                show-action
                placeholder="请输入搜索关键词"
                @input="onSearch"
                @cancel="onCancel"
            />
        </form>
            <van-list class="cinemaslist">
                <van-cell v-for="data in searchList" :key="data.cinemaId" class="cinemasItem">
                    <div class="cinemasLeft">
                        <span class="cinemasName">{{ data.name }}</span>
                        <span class="cinemasAddress">{{ data.address }}</span>
                    </div>
                    <div class="cinemasRight">
                        <span class="cinemasLowPrice">￥{{ data.lowPrice/100 }}起</span>

                    </div>
                </van-cell>
            </van-list>
        <span>猜你喜欢</span>
    </div>
</template>
<script>
import isShow from "@/util/IsShowNavBar";
import { createApp } from 'vue';
import { Search } from 'vant';

const app = createApp();
app.use(Search);
// app.use(List);
export default {
    mixins:[isShow],
    data(){
        return {
            value:'',
            searchList:[],
            ccc:'',
        }
    },
    mounted(){
        if(this.$store.state.cinemaList.length === 0){
            this.$store.dispatch('getCinemaData')
        }
    },
    methods:{
        // onSearch(val){
        //     if (val == '') return this.searchList = ''
        //     this.searchList = this.$store.state.cinemaList.filter(item => {
        //         const aaa = new RegExp(`${val}`,'gi')
        //         return aaa.test(item.name) || aaa.test(item.address) || aaa.test(item.lowPrice/100) 
        //     })
        //     // console.log(this.searchList)
        // },
        onSearch(val) {
            // console.log(val.data)
            // console.log(val)
            // console.log(this.value)
            if (val.data === '') return this.searchList = []
            this.searchList = this.$store.state.cinemaList.filter(item => {
                const aaa = new RegExp(`${val.data}`, 'gi')
                return aaa.test(item.name) || aaa.test(item.address) || aaa.test(item.lowPrice / 100)
            })
        },
        onCancel(){
            this.$router.back()
        },
    }
}
</script>
<style lang="scss" scoped>

.cinemaslist {
    box-sizing: border-box;
    text-align: left;
    .cinemasItem{
        clear: both;
        padding: 15px;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        .cinemasLeft {
            float: left;
            display: flex;
            flex-direction: column;
            width: 80%;
            .cinemasName{
            font-size: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 70%;
            }
            .cinemasAddress{
                font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 70%;
            margin-top: 5px;
            color: gray;
            }
        }
    .cinemasRight{
        float: right;
        display: flex;
        flex-direction: column;
        width: 20%;
        box-sizing: border-box;
        .cinemasLowPrice{
            color: red;
            text-align: right;
        }
    }
    }
}
.box{
    // height: 500px;
    overflow: hidden;
    position: relative;
    text-align: left;
}
</style>